<template>
    <div class="question-view" :style="{ backgroundImage:`url(${$imageSrcFormatter(backgroundSrc)})` }">
        <!-- 题号 -->
        <div class="question-num">第{{ questionNum }}题</div>
        <!-- 题目框 -->
        <div class="question-block">{{ question.question }}</div>
        <!-- 选项卡容器 -->
        <div class="answer-group">
            <ScaleButton class="answer-btn-wrap" @MmvTap="handleChecked('A')">
                <div class="answer-label">{{ question.a }}</div>
                <ScaleButton v-show="checked.includes('A')" class="answer-btn" src="05开始答题-单选页/选项框(已选)/选项框 A.png"></ScaleButton>
                <ScaleButton v-show="!checked.includes('A')" class="answer-btn" src="05开始答题-单选页/选项框(未选)/选项框 A.png"></ScaleButton>
            </ScaleButton>
            <ScaleButton class="answer-btn-wrap" @MmvTap="handleChecked('B')">
                <div class="answer-label">{{ question.b }}</div>
                <ScaleButton v-show="checked.includes('B')" class="answer-btn" src="05开始答题-单选页/选项框(已选)/选项框 B.png"></ScaleButton>
                <ScaleButton v-show="!checked.includes('B')" class="answer-btn" src="05开始答题-单选页/选项框(未选)/选项框 B.png"></ScaleButton>
            </ScaleButton>
            <ScaleButton class="answer-btn-wrap" @MmvTap="handleChecked('C')">
                <div class="answer-label">{{ question.c }}</div>
                <ScaleButton v-show="checked.includes('C')" class="answer-btn" src="05开始答题-单选页/选项框(已选)/选项框 C.png"></ScaleButton>
                <ScaleButton v-show="!checked.includes('C')" class="answer-btn" src="05开始答题-单选页/选项框(未选)/选项框 C.png"></ScaleButton>
            </ScaleButton>
            <ScaleButton class="answer-btn-wrap" @MmvTap="handleChecked('D')">
                <div class="answer-label">{{ question.d }}</div>
                <ScaleButton v-show="checked.includes('D')" class="answer-btn" src="05开始答题-单选页/选项框(已选)/选项框 D.png"></ScaleButton>
                <ScaleButton v-show="!checked.includes('D')" class="answer-btn" src="05开始答题-单选页/选项框(未选)/选项框 D.png"></ScaleButton>
            </ScaleButton>
        </div>
        <!-- 提交按钮 -->
        <ScaleButton class="qustion-submit" src="05开始答题-单选页/按钮.png" @MmvTap="handleSubmit"></ScaleButton>
        <!-- 回答正确弹窗 -->
        <SuccessDialog :visible.sync="showSuccessDialog" @close="handleNext(true)" @over="handleOver(true)"></SuccessDialog>
        <!-- 回答错误弹窗 -->
        <ErrorDialog :visible.sync="showErrorDialog" :answer="question.answer" @close="handleNext(false)" @over="handleOver(false)"></ErrorDialog>
    </div>
</template>

<script>
import SuccessDialog from '@/components/SuccessDialog/index.vue';
import ErrorDialog from '@/components/ErrorDialog/index.vue';

export default {
    name: 'QuestionView',
    components: {
        SuccessDialog,
        ErrorDialog,
    },
    data() {
        return {
            showSuccessDialog: false,
            showErrorDialog: false,
            question: {},
            checked: [],
        };
    },
    computed: {
        questionNum() {
            return this.$store.state.QuestionBank.questionNum + 1;
        },
        questionModel() {
            return this.$store.state.QuestionBank.questionModel;
        },
        backgroundSrc() {
            if (this.questionModel == 0) {
                return '05开始答题-单选页/背景.png';
            } else {
                return '07开始答题-多选页/背景.png';
            }
        },
    },
    mounted() {
        this.handleSelectQuestion();
    },
    methods: {
        handleClear() {
            this.checked = [];
        },
        async handleSelectQuestion() {
            this.question = await this.$store.dispatch('QuestionBank/handleSelectQuestion');
            console.log(JSON.stringify(this.question));
            this.handleClear();
        },
        handleChecked(item) {
            const index = this.checked.indexOf(item);
            if (index > -1) {
                this.checked.splice(index, 1);
            } else {
                this.checked.push(item);
            }
        },
        handleSubmit() {
            const m_answer = this.checked.sort().join('');
            const t_answer = this.question.answer.split('').sort().join('').toUpperCase();
            if (m_answer == t_answer) {
                this.showSuccessDialog = true;
            } else {
                this.showErrorDialog = true;
            }
        },
        async handleNext(result) {
            await this.$store.dispatch('QuestionBank/handleSubmitQuestion', result);
            await this.handleSelectQuestion();
        },
        async handleOver(result) {
            await this.$store.dispatch('QuestionBank/handleSubmitQuestion', result);
            // alert('答题结束啦！');
            this.$router.replace({ name: 'Over' }).catch(err => {
                console.log(err);
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.question-view {
    @include mmv-view-backage;
    display: flex;
    align-items: center;
    justify-content: center;
    .question-num {
        position: absolute;
        top: 8vw;
        color: rgb(232, 189, 110);
    }
    .question-block {
        // width: 80%;
        // position: absolute;
        // top: 30vw;
        // display: -webkit-box;
        // overflow: hidden;
        // -webkit-line-clamp: 5;
        // -webkit-box-orient: vertical;
        // font-size: 1vw;
        width: 80%;
        position: absolute;
        top: 28vw;
        font-size: 4vw;
        overflow-y: scroll;
        height: 27vw;
    }
    .answer-group {
        position: absolute;
        top: 70vw;
        .answer-btn-wrap {
            margin-top: 10px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            &:nth-child(1) {
                margin-top: 0px;
            }
            .answer-label {
                position: absolute;
                z-index: 2;
                max-width: 80%;
                max-height: 90%;
                user-select: none;
                pointer-events: none;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                font-size: 3.5vw;
            }
            .answer-btn {
                user-select: none;
                pointer-events: none;
            }
        }
    }
    .qustion-submit {
        position: absolute;
        top: 145vw;
    }
}
</style>
